<template>
  <div class="Warning">
    <div class="WarningImg"></div>
    <div class="Warningcontent">
      <div class="warning_"></div>
      <div class="warningContentImg"></div>
      <vueSeamlessScroll :data="AlarmData" class="seamless-warp">
        <div
          v-for="(item, index) in AlarmData"
          :key="index"
          @click="liclick($event)"
        >
          <div class="warningListitem">
            <el-row>
              <el-col :span="4"
                ><div class="warntb" :data-obj="JSON.stringify(item)"></div
              ></el-col>
              <el-col :span="10"
                ><div :data-obj="JSON.stringify(item)">
                  {{ item.date }}
                </div></el-col
              >
              <el-col :span="10"
                ><div :data-obj="JSON.stringify(item)">
                  {{ item.desc }}
                </div></el-col
              >
            </el-row>
          </div>
        </div>
      </vueSeamlessScroll>
    </div>
  </div>
</template>
<script>
import { TUVector3, TUVector2, TURotator } from "tumap/dist/tumap.v1.8.js";
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      count: 0,
      countArr: [],
      tempositions: [
        {
          x: -11404.5029296875,
          y: 144.9384765625,
          z: 10,
          roll: 0,
          pitch: -15.559989929199219,
          yaw: 109.20012664794922,
          distance: 1000,
        },
        {
          x: -1326.5460205078125,
          y: -1054.7359619140625,
          z: 10,
          roll: 0,
          pitch: -17.04499626159668,
          yaw: 8.1600980758667,
          distance: 1000,
        },
        {
          x: -6867.65966796875,
          y: -863.5277099609375,
          z: 10,
          roll: 0,
          pitch: -24.334993362426758,
          yaw: 9.120153427124023,
          distance: 1000,
        },
        {
          x: -11270.2451171875,
          y: -1019.4290771484375,
          z: 10,
          roll: 0,
          pitch: -7.999988555908203,
          yaw: -174.24000549316406,
          distance: 1000,
        },
        {
          x: -11404.5029296875,
          y: 144.9384765625,
          z: 10,
          roll: 0,
          pitch: -15.559989929199219,
          yaw: 109.20012664794922,
          distance: 1000,
        },
        {
          x: -1326.5460205078125,
          y: -1054.7359619140625,
          z: 10,
          roll: 0,
          pitch: -17.04499626159668,
          yaw: 8.1600980758667,
          distance: 1000,
        },
        {
          x: -6867.65966796875,
          y: -863.5277099609375,
          z: 10,
          roll: 0,
          pitch: -24.334993362426758,
          yaw: 9.120153427124023,
          distance: 1000,
        },
        {
          x: -11270.2451171875,
          y: -1019.4290771484375,
          z: 10,
          roll: 0,
          pitch: -7.999988555908203,
          yaw: -174.24000549316406,
          distance: 1000,
        },
      ],
      AlarmData: [],
      allEquipments: [],
      allDataItems: [],
    };
  },
  mounted() {
    this.parseTree();
  },
  methods: {
    parseTree() {
      var tem = JSON.parse(window.sessionStorage.getItem("treeData"));
      this.treeForeach(tem, (node) => {
        node.code && this.allDataItems.push(JSON.parse(JSON.stringify(node)));
      });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "warning-row";
      }
      return "";
    },

    // 时间戳改为日期格式
    getLocalTime(nS) {
      return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, " ");
    },
    add0(m) {
      return m < 10 ? "0" + m : m;
    },
    format(shijianchuo) {
      var time = new Date(shijianchuo);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y +
        "-" +
        this.add0(m) +
        "-" +
        this.add0(d) +
        " " +
        this.add0(h) +
        ":" +
        this.add0(mm) +
        ":" +
        this.add0(s)
      );
    },
    liclick(e) {
      try {
        window.Sgworld.clearAllCovering();
        var timetype = window.sessionStorage.getItem("timeType");
        var weathertype = window.sessionStorage.getItem("weatherType");
        window.Sgworld.execute("grapi", "settime", { type: timetype }, null);
        window.Sgworld.execute(
          "grapi",
          "setweather",
          { type: weathertype },
          null
        );
      } catch (error) {
        console.log(error);
      }
      var data = JSON.parse(e.target.dataset.obj);
      // 取出当前点击的code值
      var temCode = data.code;
      if (temCode) {
        var temArr = JSON.parse(JSON.stringify(this.allDataItems));
        for (var i = 0; i < temArr.length; i++) {
          var temid = temArr[i].code;
          if (temid == temCode) {
            var params = {
              name: temCode,
              location: new TUVector3(temArr[i].position.x,temArr[i].position.y, temArr[i].position.z),
              rotate:-45
            }
            window.Sgworld.execute('grapi','AIPawnLocation', params,null);
            // window.Sgworld.focusOn(
            //   new TUVector3(
            //     temArr[i].position.x,
            //     temArr[i].position.y,
            //     temArr[i].position.z
            //   ),
            //   new TURotator(0, -10, 0),
            //   260,
            //   () => {},
            //   4
            // );
            // 撒点定位
            var temObj = {};
            temObj.x = temArr[i].position.x;
            temObj.y = temArr[i].position.y;
            temObj.z = temArr[i].position.z;
            temObj.name =
              "门禁管理-" + temArr[i].floorId + "-" + temArr[i].code;
            temObj.id = temArr[i].floorId + "_" + temArr[i].id;
            temObj.scale = 0.3;
            temObj.image = window.ipUrl + "qy/static/images/popups/alarm.png";
            window.Sgworld.createBillboard(temObj);
            this.count++;
            var newcolor = { r: 255, g: 0, b: 0, a: 1 };
            var params = {
              text: "警报",
              id: this.count,
              color: newcolor,
              size: 1,
              location: new TUVector3(temObj.x, temObj.y, temObj.z),
            };
            window.Sgworld.execute("grapi", "CreatJingBao", params, null);
            var info = {};
            info.id = this.count;
            info.name = data.name;
            info.content = data.content;
            info.eid = data.id;
            window.showAlarmRecord(info);
            break;
          }
        }
      } else {
        this.$message("该条信息暂无code值！");
      }
    },
    // 树的广度遍历
    treeForeach(tree, func) {
      let node,
        list = [...tree];
      while ((node = list.shift())) {
        func(node);
        node.children && list.push(...node.children);
      }
    },
  },
  sockets: {
    sendAlertStatus(data) {
      let alertInfo = JSON.parse(data);
      let id = 0;
      alertInfo.forEach((item) => {
        item.id = id++;
        item.date = this.format(item.alarmTime);
        item.desc = item.content;
      });
      this.AlarmData = alertInfo;
    },
  },
};
</script>
<style scoped>
.seamless-warp {
  height: 400px;
  overflow: hidden;
  width: 729px;
  margin-top: 105px;
}
.warntb {
  width: 87px;
  height: 90px;
  background: url("../../../../../static/images/equipment/bjtb.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>
<style>
.Warning {
  width: 100%;
  height: 30%;
}
.Warning .WarningImg {
  width: 688px;
  height: 66px;
  background: url("../../../../../static/images/equipment/设备预警.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 10px;
  margin-left: -50px;
}
.Warningcontent {
  width: 100%;
  height: calc(100% - 112px);
  display: flex;
}
.warning_ {
  width: 199px;
  height: 194px;
  background: url("../../../../../static/images/equipment/预警.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.warningContentImg {
  width: 950px;
  height: 470px;
  background-color: darkblue;
  margin-top: 73px;
  margin-left: 0px;
  position: absolute;
  background: url("../../../../../static/images/equipment/预警表格.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.warningList {
  width: 806px;
  height: 446px;
  margin-top: 81px;
  position: absolute;
  margin-left: 90px;
  padding-left: 90px;
}
.warningListitem {
  border: 1px dashed rgb(250, 5, 5);
  border-right: none;
  border-left: none;
  width: 729px;
  height: 90px;
  line-height: 90px;
  cursor: pointer;
  color: white;
  font-size: 26px;
}
.Warning .el-table td,
.Warning .el-table th {
  padding: 0 !important;
}
.el-table .warning-row {
  background: rgba(230, 0, 18, 0.26) !important;
}

/* .el-table /deep/ td,.el-table /deep/ th{
    padding: 0 !important;
} */
</style>
